<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="编号" prop="number">
        <el-input  v-model="form.numberNum" disabled style="width: 280px;"/>
      </el-form-item>
      <el-form-item label="公用事由" prop="busReason">
        <el-input :disabled='isdisabled' v-model="form.busReason" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="开始时间" prop="busStartDate">
        <el-date-picker clearable
                        style="width: 280px;"
                        v-model="form.busStartDate"
                        type="date"
                        :disabled='isdisabled'
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="dateChanged"
                        :picker-options="pickerOptionStart"
                        placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="busEndDate">
        <el-date-picker clearable
                        style="width: 280px;"
                        v-model="form.busEndDate"
                        type="date"
                        :disabled='isdisabled'
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="dateChanged"
                        :picker-options="pickerOptionEnd"
                        placeholder="请选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时长(天)" prop="useCount">
        <el-input style="width: 280px;" v-model="form.useCount" disabled placeholder="请输入用车时长" />
      </el-form-item>
      <el-form-item label="出发地点" prop="useDistance">
        <el-input
          :disabled="isdisabled"
          v-if="form.useDistance"
          v-model="form.useDistance"
          placeholder="请输入出发地点"
        >
          <i
            v-if="!isdisabled"
            slot="suffix"
            class="el-icon-close"
            @click="loadMap1()"
            style="cursor: pointer;"
          ></i>
        </el-input>
        <el-cascader
          v-else
          style="width: 280px;"
          size="large"
          :options="options"
          v-model="form.useDistance"
          @change="handleChangePlace1"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="车辆类型" prop="carType">
        <el-select style="width: 280px;" v-model="form.carType" placeholder="请选择" :disabled='isdisabled'>
          <el-option
            v-for="dict in dict.type.car_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="附件">
        <file-upload v-model="form.attachment" :is-disabled='isdisabled'/>
      </el-form-item>
    </el-form>
      <div v-show="parentTaskId==null" class="dialog-footer" style="text-align:center">
          <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
          <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm" v-if="confirmVisible">提交</el-button>
      </div>
      <!-- 工作流开始 -->
      <verify ref="verifyRef" :taskId="taskId"
              @submitCallback="submitCallback" :componentName="componentName"
              :taskVariables="taskVariables" :sendMessage="sendMessage"></verify>
  </div>
</template>

<script>
import { getAdminBus } from "@/api/oa/adminBus";
import verify from "@/components/Process/Verify";
import {parseTime} from "@/utils/ruoyi";
import {regionData, CodeToText, provinceAndCityData} from "element-china-area-data";
import dayjs from "dayjs";
export default {
  name: "AdminBusForm",
  dicts: ['act_status','car_type'],
  components: {
      verify
  },
  props: {
      businessKey: String, // 业务唯一标识
      parentTaskId: String, // 父级任务id
      taskId: String, // 任务id
      confirmVisible:{
          type: Boolean,
          default: true
      }
  },
  data() {
    return {
      componentName:"私车公用审批申请",
      isdisabled:true,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
        projectNameList:[],
      // 表单校验
      rules: {
        userId: [
          { required: true, message: "用户id不能为空", trigger: "blur" }
        ],
        busReason: [
          { required: true, message: "公用事由不能为空", trigger: "blur" }
        ],
        busStartDate: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        busEndDate: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],
        useCount: [
          { required: true, message: "用车时长不能为空", trigger: "blur" }
        ],
        useDistance: [
          { required: true, message: "用车目的地不能为空", trigger: "blur" }
        ],
        carType: [
          { required: true, message: "车辆类型不能为空", trigger: "change" }
        ],
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {},
      processKey: 'oa_admin_car',
      options: provinceAndCityData,
      // 开始日期的可选范围
      pickerOptionStart: {
        disabledDate: time => {
          if (this.form.endDate) {
            return time.getTime() > new Date(this.form.endDate).getTime();
          }
          return time.getTime() <= new Date();
        }
      },
      pickerOptionEnd: {
        disabledDate: time => {
          if (this.form.startDate) {
            return time.getTime() < new Date(this.form.startDate).getTime();
          }
          return time.getTime() <= new Date();
        }
      },
    };
  },
  watch: {
      businessKey: {
          immediate: true, // 很重要！！！
          handler (newVal) {
              if(newVal) {
                  this.getById()
              }
          }
      }
  },
  methods: {
    submitCallback(){
        this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getAdminBus(this.businessKey)
      this.form = data;
      if (data.actBusinessStatus.createTime){
            this.form.numberNum=this.processKey + '@' + parseTime(data.actBusinessStatus.createTime, '{y}{m}{d}{h}{i}{s}')
        }
    },
    /** 提交按钮 */
    submitForm() {
        getAdminBus(this.businessKey).then(response => {
            this.taskVariables = {
                entity: response.data,
            };
            this.sendMessage = {
              title: "私车公用审批提醒",
              messageContent: this.$store.state.user.nickName + "审批通过了私车公用审批"
            };
        });
        this.$refs.verifyRef.visible = true
        this.$refs.verifyRef.reset()
    },
    /*日期范围控件选择完毕*/
    dateChanged() {
      if (this.form.busStartDate != null && this.form.busEndDate != null) {
        let val = dayjs(this.form.busEndDate).diff(
          dayjs(this.form.busStartDate),
          "days"
        );
        this.form.useCount = val < 0 ? val : val + 1;
      }
    },
    handleChangePlace1(arr) {
      this.form.useDistance = CodeToText[arr[0]] + "->" + CodeToText[arr[1]];
    },
    loadMap1() {
      this.form.useDistance = "";
    },
  }
};
</script>
<style scoped>
    /* 设置滚动条宽度和高度 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px; /* 横向滚动条 */
        height: 8px; /* 纵向滚动条 必写 */
    }
    /* 设置滚动条样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #dde;
        border-radius: 3px;
    }
    #selectForm >>> .el-form-item__label {
        font-size: 12px;
    }
    ::v-deep .bjsm .el-form-item__content{
        width: calc(100% - 130px) !important;
    }
</style>
